<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名片夹详情 - 名片管理系统</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-table/1.16.0/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/css/business-style.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Nunito', 'Microsoft YaHei', sans-serif;
        }
        .card-container {
            animation: fadeIn 0.5s ease-out;
        }
        .table tbody tr {
            transition: all 0.3s ease;
        }
        .btn-card-action {
            opacity: 0.8;
            transition: all 0.3s ease;
        }
        .btn-card-action:hover {
            opacity: 1;
            transform: scale(1.1);
        }
        .folder-header {
            display: flex;
            align-items: center;
        }
        .folder-header i {
            color: var(--secondary-color);
        }
        .folder-title {
            margin-left: 0.5rem;
            font-weight: 600;
        }
        .empty-state {
            padding: 3rem 1rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div th:replace="fragments/header :: header"></div>

    <!-- Toast消息容器 -->
    <div class="toast-container"></div>

    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col-md-8">
                <h2 class="folder-header">
                    <a th:href="@{/user/businesscard}" class="text-dark mr-2">
                        <i class="fa fa-arrow-left"></i>
                    </a>
                    <i class="fa fa-folder-open-o fa-lg"></i>
                    <span class="folder-title" th:text="${folder.folderName}">名片夹名称</span>
                </h2>
            </div>
            <div class="col-md-4 text-right">
                <div class="btn-group">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        <i class="fa fa-plus"></i> 添加名片
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#" id="addSingleCardBtn">
                            <i class="fa fa-address-card-o"></i> 单个录入
                        </a>
                        <a class="dropdown-item" href="#" id="addBatchCardBtn">
                            <i class="fa fa-list"></i> 批量录入
                        </a>
                        <a class="dropdown-item" href="#" id="importCardBtn">
                            <i class="fa fa-upload"></i> 导入名片
                        </a>
                    </div>
                </div>
                <div class="btn-group ml-2">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                        <i class="fa fa-cog"></i> 更多操作
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" th:href="@{/user/businesscard/card/export/{id}(id=${folder.id})}">
                            <i class="fa fa-download"></i> 导出名片夹
                        </a>
                        <a class="dropdown-item" href="#" id="searchCardBtn">
                            <i class="fa fa-search"></i> 条件查询
                        </a>
                        <a class="dropdown-item" href="#" id="batchUpdateCardBtn">
                            <i class="fa fa-pencil"></i> 批量修改
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 名片列表 -->
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs" id="cardTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="cards-tab" data-toggle="tab" href="#cards" role="tab">
                            名片列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="deleted-tab" data-toggle="tab" href="#deleted" role="tab">
                            回收站
                        </a>
                    </li>
                </ul>

                <div class="tab-content" id="cardTabsContent">
                    <!-- 名片列表标签页 -->
                    <div class="tab-pane fade show active" id="cards" role="tabpanel">
                        <div th:if="${cards.empty}" class="empty-state">
                            <div class="empty-state-icon">
                                <i class="fa fa-address-card-o"></i>
                            </div>
                            <p class="empty-state-text">当前名片夹中没有名片，点击"添加名片"按钮开始添加</p>
                            <button class="btn btn-primary btn-icon mt-3" id="emptyStateAddBtn">
                                <i class="fa fa-plus"></i> 添加第一张名片
                            </button>
                        </div>

                        <div th:if="${!cards.empty}" class="card-container">
                            <div class="table-responsive">
                                <table class="table table-hover" id="cardTable">
                                    <thead>
                                        <tr>
                                            <th data-field="name">姓名</th>
                                            <th data-field="gender">性别</th>
                                            <th data-field="phone">联系电话</th>
                                            <th data-field="organization">机构名称</th>
                                            <th data-field="position">职务</th>
                                            <th data-field="actions" class="text-right">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="card, cardStat : ${cards}" th:style="'animation-delay: ' + ${cardStat.index * 0.05} + 's'" class="slide-in-up">
                                            <td>
                                                <span class="font-weight-bold" th:text="${card.name}">姓名</span>
                                            </td>
                                            <td th:text="${card.gender}">性别</td>
                                            <td>
                                                <span th:if="${card.phone}" th:text="${card.phone}">联系电话</span>
                                                <span th:unless="${card.phone}" class="text-muted">--</span>
                                            </td>
                                            <td>
                                                <span th:if="${card.organization}" th:text="${card.organization}">机构名称</span>
                                                <span th:unless="${card.organization}" class="text-muted">--</span>
                                            </td>
                                            <td>
                                                <span th:if="${card.position}" th:text="${card.position}">职务</span>
                                                <span th:unless="${card.position}" class="text-muted">--</span>
                                            </td>
                                            <td class="text-right card-actions">
                                                <button class="btn btn-outline-primary btn-card-action view-card"
                                                        th:data-id="${card.id}" title="查看详情">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-outline-secondary btn-card-action edit-card"
                                                        th:data-id="${card.id}" title="编辑名片">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="btn btn-outline-danger btn-card-action delete-card"
                                                        th:data-id="${card.id}" th:data-name="${card.name}" title="删除名片">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 回收站标签页 -->
                    <div class="tab-pane fade" id="deleted" role="tabpanel">
                        <div id="deletedCardsContainer">
                            <!-- 已删除的名片列表将通过AJAX加载 -->
                            <div class="text-center py-5 fade-in">
                                <div class="spinner-border" style="color: var(--secondary-color);" role="status">
                                    <span class="sr-only">加载中...</span>
                                </div>
                                <p class="mt-3 text-muted">正在加载回收站内容...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看名片模态框 -->
    <div class="modal fade" id="viewCardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">名片详情</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>姓名：</strong><span id="viewName"></span></p>
                            <p><strong>性别：</strong><span id="viewGender"></span></p>
                            <p><strong>联系电话：</strong><span id="viewPhone"></span></p>
                            <p><strong>电子邮箱：</strong><span id="viewEmail"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>机构名称：</strong><span id="viewOrganization"></span></p>
                            <p><strong>职务：</strong><span id="viewPosition"></span></p>
                            <p><strong>地址：</strong><span id="viewAddress"></span></p>
                            <p><strong>备注：</strong><span id="viewRemark"></span></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="editFromView">编辑</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑名片模态框 -->
    <div class="modal fade" id="cardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cardModalTitle">添加名片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="cardForm">
                        <input type="hidden" id="cardId" name="id">
                        <input type="hidden" id="folderId" name="folderId" th:value="${folder.id}">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">姓名<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="gender">性别</label>
                                    <select class="form-control" id="gender" name="gender">
                                        <option value="">请选择</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone">联系电话</label>
                                    <input type="tel" class="form-control" id="phone" name="phone">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email">电子邮箱</label>
                                    <input type="email" class="form-control" id="email" name="email">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="organization">机构名称</label>
                                    <input type="text" class="form-control" id="organization" name="organization">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="position">职务</label>
                                    <input type="text" class="form-control" id="position" name="position">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="address">地址</label>
                            <input type="text" class="form-control" id="address" name="address">
                        </div>

                        <div class="form-group">
                            <label for="remark">备注</label>
                            <textarea class="form-control" id="remark" name="remark" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveCard">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除名片确认模态框 -->
    <div class="modal fade" id="deleteCardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">删除名片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除 <strong><span id="deleteCardName"></span></strong> 的名片吗？</p>
                    <p class="text-muted">名片将被移至回收站，您可以稍后恢复。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteCard">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 批量录入名片模态框 -->
    <div class="modal fade" id="batchCardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">批量录入名片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="text-muted">请在下方表格中填写名片信息，填写完成后点击"保存"按钮。</p>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="batchCardTable">
                            <thead>
                                <tr>
                                    <th>姓名<span class="text-danger">*</span></th>
                                    <th>性别</th>
                                    <th>联系电话</th>
                                    <th>机构名称</th>
                                    <th>职务</th>
                                    <th>地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="text" class="form-control form-control-sm name" required></td>
                                    <td>
                                        <select class="form-control form-control-sm gender">
                                            <option value="">请选择</option>
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </td>
                                    <td><input type="tel" class="form-control form-control-sm phone"></td>
                                    <td><input type="text" class="form-control form-control-sm organization"></td>
                                    <td><input type="text" class="form-control form-control-sm position"></td>
                                    <td><input type="text" class="form-control form-control-sm address"></td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-danger remove-row">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7">
                                        <button type="button" class="btn btn-sm btn-primary" id="addRow">
                                            <i class="fa fa-plus"></i> 添加一行
                                        </button>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveBatchCards">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导入名片模态框 -->
    <div class="modal fade" id="importCardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">导入名片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="importCardForm">
                        <input type="hidden" name="folderId" th:value="${folder.id}">

                        <div class="form-group">
                            <label for="importFile">选择Excel文件</label>
                            <input type="file" class="form-control-file" id="importFile" name="file" accept=".xls,.xlsx" required>
                            <small class="form-text text-muted">请上传Excel文件，支持.xls或.xlsx格式</small>
                        </div>

                        <div class="form-group">
                            <a href="#" class="btn btn-link" id="downloadTemplate">
                                <i class="fa fa-download"></i> 下载模板
                            </a>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" form="importCardForm" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导入结果模态框 -->
    <div class="modal fade" id="importResultModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">导入结果</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <p>部分记录导入失败，以下是失败的记录详情：</p>
                        <div id="importResultDetails"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmImportResult">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 彻底删除名片确认模态框 -->
    <div class="modal fade" id="removeCardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">彻底删除名片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>您确定要彻底删除 <strong><span id="removeCardName"></span></strong> 的名片吗？</p>
                    <p class="text-danger">此操作不可撤销，删除后将无法恢复！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmRemoveCard">彻底删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 条件查询模态框 -->
    <div class="modal fade" id="searchCardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">条件查询</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="searchCardForm">
                        <div class="form-group">
                            <label for="searchName">姓名</label>
                            <input type="text" class="form-control" id="searchName" name="name">
                        </div>

                        <div class="form-group">
                            <label for="searchGender">性别</label>
                            <select class="form-control" id="searchGender" name="gender">
                                <option value="">全部</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="searchPhone">联系电话</label>
                            <input type="text" class="form-control" id="searchPhone" name="phone">
                        </div>

                        <div class="form-group">
                            <label for="searchOrganization">机构名称</label>
                            <input type="text" class="form-control" id="searchOrganization" name="organization">
                        </div>

                        <div class="form-group">
                            <label for="searchPosition">职务</label>
                            <input type="text" class="form-control" id="searchPosition" name="position">
                        </div>

                        <div class="form-group">
                            <label for="searchAddress">地址</label>
                            <input type="text" class="form-control" id="searchAddress" name="address">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" form="searchCardForm" class="btn btn-primary">查询</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 批量更新模态框 -->
    <div class="modal fade" id="batchUpdateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">批量更新</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="batchUpdateForm">
                        <div class="form-group">
                            <label for="updateField">选择要更新的字段</label>
                            <select class="form-control" id="updateField" name="updateField" required>
                                <option value="">请选择</option>
                                <option value="organization">机构名称</option>
                                <option value="position">职务</option>
                                <option value="address">地址</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="newValue">新值</label>
                            <input type="text" class="form-control" id="newValue" name="newValue" required>
                        </div>

                        <div class="form-group">
                            <label>选择要更新的名片</label>
                            <div class="card">
                                <div class="card-body" style="max-height: 200px; overflow-y: auto;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                        <label class="form-check-label font-weight-bold" for="selectAll">
                                            全选
                                        </label>
                                    </div>
                                    <hr>
                                    <div id="cardCheckboxes">
                                        <!-- 动态生成的复选框 -->
                                        <div th:each="card : ${cards}" class="form-check">
                                            <input class="form-check-input select-card" type="checkbox" th:id="'card-' + ${card.id}" th:value="${card.id}">
                                            <label class="form-check-label" th:for="'card-' + ${card.id}" th:text="${card.name + ' (' + (card.organization != null ? card.organization : '') + ')'}">
                                                名片名称 (机构名称)
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" form="batchUpdateForm" class="btn btn-primary">更新</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.6.0/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-table/1.16.0/bootstrap-table.min.js}"></script>
    <script th:src="@{/js/businesscard.js}"></script>
    <script>
        $(document).ready(function() {
            // 空状态按钮点击事件
            $('#emptyStateAddBtn').on('click', function() {
                $('#addSingleCardBtn').click();
            });

            // 表格行悬停效果增强
            $('.table tbody tr').hover(
                function() {
                    $(this).css('background-color', 'rgba(52, 152, 219, 0.05)');
                },
                function() {
                    $(this).css('background-color', '');
                }
            );

            // 表单验证增强
            $('#cardForm').on('submit', function(e) {
                e.preventDefault();
                $('#saveCard').click();
            });

            // 标签页切换动画
            $('.nav-tabs a').on('shown.bs.tab', function(e) {
                $($(e.target).attr('href')).addClass('fade-in');
            });

            // 添加Toast消息显示动画
            function showToast(message, type) {
                const toastId = 'toast-' + Date.now();
                const toastHtml = `
                    <div id="${toastId}" class="toast toast-${type}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
                        <div class="toast-header">
                            <i class="fa ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} toast-icon"></i>
                            <strong class="mr-auto">${type === 'success' ? '成功' : '错误'}</strong>
                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="toast-body">
                            ${message}
                        </div>
                    </div>
                `;

                $('.toast-container').append(toastHtml);
                $(`#${toastId}`).toast('show');

                // 自动移除
                $(`#${toastId}`).on('hidden.bs.toast', function() {
                    $(this).remove();
                });
            }

            // 导出全局函数供其他脚本使用
            window.showToast = showToast;

            // 模态框动画效果
            $('.modal').on('show.bs.modal', function() {
                $(this).find('.modal-content').addClass('animate__animated animate__fadeInUp');
            }).on('hide.bs.modal', function() {
                $(this).find('.modal-content').removeClass('animate__animated animate__fadeInUp');
            });
        });
    </script>

    <script>
        // 全选/取消全选
        $("#selectAll").change(function() {
            $(".select-card").prop("checked", $(this).prop("checked"));
        });

        // 下载模板
        $("#downloadTemplate").click(function(e) {
            e.preventDefault();
            window.location.href = "/user/businesscard/card/export/template";
        });

        // 导入结果确认
        $("#confirmImportResult").click(function() {
            location.reload();
        });
    </script>
</body>
</html>
